<script setup>
import { reactive } from 'vue';
// import { } from '../../util/request';
import { ListsApi } from '../util/request';

const data = reactive({
    listfruits:[],
})

const questdata = () => {
    ListsApi().then(res => {
        console.log("请求下来的数据",res);
        data.listfruits = res   
        console.log("本地数据",data.listfruits);     
    })
}
</script>

<template>
    <van-tabs v-model:active="active">        
        <!-- 展示区域 -->
        <van-tab title="查询数据">            
            <div>
                <van-button type="primary" @click="questdata">获取全部数据</van-button>
                <table cellspacing="0" style="width:100%" class="table">
                    <tr>
                        <td>ID</td>
                        <td>name</td>
                        <td>price</td>                
                    </tr>
                    <tr v-for="(furits,index) in data.listfruits" :key="index">
                        <th>{{ furits.id }}</th>
                        <th>{{ furits.name }}</th>
                        <th>{{ furits.price }}</th>
                    </tr>
                </table>    
            </div>
        </van-tab>

        <router-link :to="{name:'addf'}">添加</router-link> | 
        <router-link :to="{name:'delf'}">删除</router-link> | 
        <router-link :to="{name:'modf'}">修改</router-link> | 

        <div>
            <router-view></router-view>
            <!-- <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in" appear>
                    <keep-alive>
                    <component :is="Component" />
                    </keep-alive>    
                </transition>
            </router-view> -->

            <!-- <template>
                <router-view v-slot="{ Component }" :key="key">   
                <transition 
                name="fade-transform"
                mode="out-in"
                enter-from-class="fade-transform-enter"
                >        
                    <keep-alive :include="cachedViews">
                        <component :is="Component" />
                    </keep-alive>
                </transition>
            </router-view>
            </template> -->
            

        </div>

        <!-- 新增水果 -->
        <!-- <van-tab title="更改数据"></van-tab>         -->
        <!-- 删除水果 -->
        <!-- <van-tab title="标签 3"></van-tab> -->
        <!-- <van-tab title="标签 3">内容 3</van-tab> -->
    </van-tabs>

</template>

<style>    
    .fade-leave-active,
.fade-enter-active {
  transition: all 0.5s;
}
 
/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {  
  opacity: 0;
  transform: translateY(-30px);
}
.fade-enter-to { 
  opacity: 1;
  transform: translateY(0px);
}
 
.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
